<template lang="html">
  <div class="">
    <ul>
      <li v-for="i in commentList">
        <div class="avatar">
          <img v-if="i.is_cryptonym" class="max" :src="i.comment_icon">
          <img v-else class="max" src="/static/modules/news/default-avatar.png" alt="">
        </div>
        <div class="main">
          <div class="name">
            {{ i.comment_username }}
          </div>
          <div class="date">
            {{ i.addtime }}
          </div>
          <div class="content">
            {{ i.content }}
          </div>
          <div :class="'btn-zan btn-zan-'+i.is_like" @click="clickZanComment(i.id, i.is_like)">
            <i>
              <img class="max" v-if="i.is_like" src="/static/modules/news/information_icon_dot_nor@2x.png">
              <img class="max" v-else src="/static/modules/news/information_icon_dot_press@2x.png">
            </i>
            <span>
              {{ i.like }}
            </span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['commentList'],
  methods: {
    clickZanComment(id, is_like) {
      this.$emit('clickZanComment', id)
    }
  }
}
</script>

<style lang="scss" scoped>
li{
  overflow: hidden;
  border-bottom: 1px solid #eee;
  padding-bottom: .3rem;
  margin: 0 .4rem;
  margin-left: .6rem;
  margin-top: .5rem;
  .avatar{
    float: left;
    width: 1.2rem;
    margin-right: .3rem;
    img{
      border-radius: 100%;
      width: 1.2rem;
      height: 1.2rem;
    }
  }
  .main{
    float: left;
    width: 7.3rem;
    .date{
      font-size: .26rem;
      color: #999999;
      margin: .1rem 0;
    }
    .content{
      line-height: .56rem;
      font-size: .34rem;
    }
    .btn-zan{
      float: right;
      margin-top: .1rem;
      i{
        display: inline-block;
        width: .4rem;
        img{
          vertical-align: middle;
          margin-top: -.1rem;
        }
      }
      span{
        color: #999999;
        display: inline-block;
      }
    }
    .btn-zan-false span{
      color: #4F80FF;
    }
  }
}
</style>
